<template>
  <div id="drag-parent" class="drag-parent relative w-full h-full" @mousedown="parentMousedown">
    <VueDraggable
      v-for="(item, i) in currentStage.components"
      :key="i"
      :controller="item"
      @selected="activated(item)"
      :zoom="currentStage.scale"
      @contextmenu="createContextmenu(item)"
      @drag="update"
      @resize="update"
      @rotate="update"
      data-contextmenu
      data-shape="drag"
      :data-id="item.id"
      :active="item.id === currentShape.id"
    >
      <!-- 矩形 -->
      <div
        v-if="item.type === 'rect'"
        class="h-full w-full"
        data-shape="rect"
        :style="componentStyle(item)"
      ></div>
      <!-- 视频类型 -->
      <div
        v-if="item.type.includes('video')"
        data-shape
        :style="componentStyle(item)"
        @dblclick="setVideo"
        class="h-full"
      >
        <!-- 视频 -->
        <div
          v-if="item.type === 'd-video'"
          data-shape="video"
          class="center"
          :style="componentStyle(item)"
        >
          <IconVideoCamera></IconVideoCamera>
        </div>
        <template v-else>
          <video
            v-if="!!item.src"
            autoplay
            :width="item.w"
            :height="item.h"
            :src="item.src"
            :controls="true"
            controlslist="nodownload"
          >
            <source :key="item.src" />
          </video>
          <div v-else class="no-video w-full h-full center">
            {{ t["上传"] }}
          </div>
        </template>
      </div>

      <!-- 文字 -->
      <div
        v-if="item.type.includes('text')"
        data-shape="text"
        :class="[item.textPosition]"
        @dblclick="onDblClick(item)"
        class="w-full h-full"
      >
        <div
          v-if="!item.edit"
          :style="getTextStyle(item)"
          :class="[item.textPosition]"
          v-text="item.text"
          class="w-full h-full"
        ></div>
        <textarea
          v-else
          v-model="item.text"
          class="w-full h-full"
          v-focus
          v-noPaste
          :style="getTextStyle(item)"
          @blur="onTextBlur(item)"
          @focus="onTextFocus(item)"
        ></textarea>
      </div>

      <!-- 二维码 -->
      <div
        v-if="item.type.includes('qrcode')"
        data-shape="qrcode"
        :style="componentStyle(item)"
        class="w-full h-full bgimage"
      >
        <div
          class="w-full h-full"
          :style="{
            backgroundImage: `url(${item.src})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover'
          }"
          v-if="item.type === 'qrcode'"
        ></div>
        <div v-else class="center h-full">
          <IconQrcode style="color: black" />
        </div>
      </div>

      <!-- 条形码  -->
      <div
        v-if="item.type.includes('barcode')"
        data-shape="barcode"
        :style="componentStyle(item)"
        class="w-full h-full"
      >
        <div class="w-full h-full" v-if="item.type === 'barcode'">
          <img :src="item.src" :draggable="false" class="w-full h-full" />
        </div>
        <div v-else class="center h-full">
          <IconScan />
        </div>
      </div>

      <!-- 图片 -->
      <div
        v-if="item.type.includes('image')"
        :style="componentStyle(item)"
        data-shape="image"
        class="h-full w-full"
      >
        <div class="w-full h-full" v-if="item.type === 'image'">
          <!-- 没有图片 -->
          <div v-if="!item.cacheSrc" class="text-[12px] center no-image" @dblclick="setImage">
            <div>{{ t["上传"] }}</div>
          </div>
          <div v-else @dblclick="setImage">
            <img :draggable="false" :src="item.cacheSrc" :width="item.w" :height="item.h" />
          </div>
        </div>
        <div v-else class="h-full w-full center">
          <IconImage class="text-[1.5rem]" />
        </div>
      </div>
    </VueDraggable>
  </div>
</template>

<script setup lang="ts">
import VueDraggable from "@/components/draggable/index.vue";

import { addIdInSet, currentShape } from "@/views/paint/modules/data/shapes";
import {
  currentStage,
  propMode,
  setComponentMode,
  stageConfig
} from "@/views/paint/modules/data/stage";

import { IShapeProps } from "@/interface/IShape";
import { CSSProperties } from "vue";
import { contextmenuData } from "../../layout/bus";
import { setImage, setVideo } from "./shape-config/image.event";
import { getTextStyle, onDblClick, onTextBlur, onTextFocus } from "./shape-config/text.event";

const t = translate("公共模块");
/**
 * 注释: 激活触发
 *
 * */
const activated = (item: IShapeProps) => {
  currentShape.value = item;

  addIdInSet(item);
  /* 设置成组件模式 */
  setComponentMode();
  stageConfig.value.showSize = true;
};
const update = (item: IShapeProps) => {
  currentShape.value = item;
};

/**
 * 注释:主要用于显示边框
 *
 * */
const componentStyle = (item: IShapeProps): CSSProperties => {
  return {
    outlineColor: item.borderColor,
    border: item.hasBorder ? `1px solid ${item.borderColor} !important` : "none",
    backgroundColor: item.bgcolor
  };
};

/**
 * 注释: 创建组件的右键菜单
 *
 * */
const createContextmenu = (shape: IShapeProps) => {
  const e = window.event as MouseEvent;
  currentShape.value = shape;
  contextmenuData.value.x = e.x;
  contextmenuData.value.y = e.y;
};

const parentMousedown = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  propMode.value = target.id === "drag-parent";
};
</script>

<style lang="scss" scoped>
.drag-item {
  transform-origin: center center;
}
</style>
